import { InputProps, SwitchProps, TimePickerDefaultProps, InputNumberProps } from 'element-plus';
import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
import { BreakPoint, Responsive } from '@/components/Grid/interface';

export interface EnumProps {
	label: string; // 选项框显示的文字
	value: any; // 选项框值
	disabled?: boolean; // 是否禁用此选项
	tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
	children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
	[key: string]: any;
}

// 给每个不同element组件定义类型，主要是props属性，没有组件的就新增
export interface Input {
	el?: 'input';
	props?: Partial<InputProps> | any;
}

export interface InputNumber {
	el?: 'input-number';
	props?: Partial<InputNumberProps>;
}

export interface Select {
	el?: 'select';
	props?: any;
}

export interface TreeSelect {
	el?: 'tree-select';
	props?: any;
}

export interface DatePicker {
	el?: 'date-picker';
	props?: any;
}

export interface TimePicker {
	el?: 'time-picker';
	props?: Partial<TimePickerDefaultProps>;
}

export interface TimeSelect {
	el?: 'time-select';
	props?: Partial<TimeSelectProps>;
}

export interface Switch {
	el?: 'switch';
	props?: Partial<SwitchProps> | { 'active-text': string; 'inactive-text': string };
}

export interface RadioGroup {
	el?: 'radio-group';
	props?: any;
}

export interface CheckboxGroup {
	el?: 'checkbox-group';
	props?: any;
}

// 联动
export interface Cascader {
	placeholder?: string;
	disabled?: boolean; // 是否禁用
	clearable?: boolean; // 是否清除按钮
	filterable?: boolean; // 是否搜索
	'collapse-tags-tooltip'?: boolean; // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
	'collapse-tags'?: boolean; // 多选模式下是否折叠Tag
	'show-all-levels'?: boolean; // 输入框中是否显示选中值的完整路径
}

export type BaseSearch = {
	inputSearch?: boolean; // input框后面的搜索按钮
	filterDict?: any[]; // 过滤字典某些值
	value?: any; // type 为text时赋值
	cascader?: Cascader;
	type?: string;
	key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
	order?: number; // 搜索项排序（从大到小）
	span?: number; // 搜索项所占用的列数，默认为1列
	offset?: number; // 搜索字段左侧偏移列数
	defaultValue?: string | number | boolean | any | any[]; // 表单项默认值
} & Partial<Record<BreakPoint, Responsive>>;

export type SearchProps = BaseSearch &
	(Input | InputNumber | Select | DatePicker | TimePicker | TimeSelect | Switch | TreeSelect | RadioGroup | CheckboxGroup);

// 栅格布局
interface layoutCol {
	span?: number; // 栅格占据的列数
	offset?: number; // 栅格左侧的间隔格数
	push?: number; // 栅格向右移动格数
	pull?: number; // 栅格向左移动格数
	xs?: number | object;
	sm?: number | object;
	md?: number | object;
	lg?: number | object;
	xl?: number | object;
}

export interface FromBoxProps {
	label: string; // 表单名
	prop: string; // 表单的key
	required?: boolean;
	labelClass?: string;
	rules?: any; // 表单规则
	keyRange?: string[]; // 时间key
	hidden?: boolean; // 是否隐藏该表单
	slot?: boolean; // 插槽
	layoutCol?: layoutCol; // 栅格布局
	focusForm?: ((...args: any[]) => any) | undefined; // 当选择器的输入框获得焦点时触发
	changeForm?: ((...args: any[]) => any) | undefined; // 组件change方法
	searchClick?: () => void | undefined; // 搜索按钮点击事件
	form?: SearchProps | undefined; // 表单项配置
	enum?: EnumProps[] | ((params?: any) => Promise<any>); // 枚举类型（渲染值的字典）
	fieldNames?: { label: string; value: string }; // 指定 label && value 的 key 值
	enumParams?: string | number; // 字典参数
}
export type FormParam = {
	[key: string]: any;
};
